﻿@using BrnMall.Web.StoreAdmin.Models
@model BrnMall.Web.StoreAdmin.Models.WidgetConfigListModel

@section header{
<title>小程序定制</title>
    <link type="text/css" rel="stylesheet" href="/admin_store/css/site.css"/>
    <script type="text/javascript" src="/admin_store/scripts/jquery.js"></script>
    <script type="text/javascript" src="/admin_store/scripts/jquery.validate.js"></script>
    <script type="text/javascript" src="/admin_store/scripts/jquery.validate.unobtrusive.js"></script>
    <link type="text/css" rel="stylesheet" href="/components/webuploader/webuploader.css"/>
    <script type="text/javascript" src="/components/webuploader/webuploader.js"></script>
    <link href="/components/jbox/Skins/Default/jbox.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/components/jbox/jquery.jBox-2.3.min.js"></script>
    <script type="text/javascript" src="/admin_store/scripts/showlist.js"></script>
    <script type="text/javascript" src="/components/my97datepicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/admin_store/scripts/selectlist.js"></script>
    <script type="text/javascript">
        $(function() {
            var uploader = WebUploader.create({
                pick: '.uploadBut',
                auto: true,
                swf: '/components/webuploader/Uploader.swf',
                server: '/storeadmin/tool/upload?operation=uploadwidgetimage',
                fileVal: 'upload',
                accept: {
                    title: 'Images',
                    extensions: '@ViewData["allowImgType"]',
                    mimeTypes: '*'
                },
                fileSingleSizeLimit: @ViewData["maxImgSize"]
            });

            uploader.on('uploadProgress',
                function(file, percentage) {
                    $(".uploadPreview").html("上传中...");
                });

            uploader.on('uploadSuccess',
                function(file, response) {
                    var data = response._raw;
                    if (data == "-1")
                        $(".uploadPreview").html('图片不能为空');
                    else if (data == "-2")
                        $(".uploadPreview").html('图片类型不允许');
                    else if (data == "-3")
                        $(".uploadPreview").html('图片太大');
                    else {
                        $(".uploadPreview")
                            .html("<img src=\"@WorkContext.ImageCDN/upload/store/@WorkContext.StoreId/widget/" +
                                data +
                                "\"  />");
                        $("#ShowImg").val(data);
                    }
                });

            uploader.on('uploadError',
                function(file) {
                    $(".uploadPreview").html("上传失败");
                });
            $("#DisplayType").change(function() {
                setDisplayImg();
            });

            $("#DisplayPosition").change(function(){
                var value=parseInt($(this).val())
                if(value >=11 && value<=14)
                    setDisplayType(1);
                else
                    setDisplayType(0);
            })
        });


        function load(){
            //放置区域
            $(".DisplayPosition").each(function(){
                var position=$(this).attr("data-value");
                var html="";
                if(position=='1') html="顶部区域"
                else if(position=='2') html="顶部区域"
                else if(position=='3') html="内容区域下"
                else if(position=='4') html="商品区域下"
                else if(position=='11') html="左侧中间悬浮"
                else if(position=='12') html="左侧底部悬浮"
                else if(position=='13') html="右侧中间悬浮"
                else if(position=='14') html="右侧底部悬浮"
                $(this).html(html);
            });
        }


        //根据放置区域，设置展示类型
        function setDisplayType(type){
            var html="<option value='11' selected>单图</option>";
            if(type!=1) {
                html += "<option value='12'>双图</option>";
                html += "<option value='13'>三图</option>";
                html += "<option value='14'>四图</option>";
                html += "<option value='15'>五图</option>";
                html += "<option value='16'>自动轮播</option>";
                html += "<option value='17'>手动轮播</option>";
            }
            $("#DisplayType").html(html);
            setDisplayImg();
        }

        //显示示意图
        function setDisplayImg(){      
            var sel=document.getElementById("DisplayType");
            var idx =sel.options[sel.selectedIndex].value;
            if (idx > 0) {
                var pic = "@WorkContext.ImageCDN/images/weapp/widget/index_pic_" + idx + ".jpg";
                $("#picDisplayType").attr("src", pic);
            } else {
                $("#picDisplayType").attr("src", "");
            }      
        }

    </script>

}

@section body{
    <h1 class="rightH1">
		微信小程序 > 首页定制 > <span class="rightH1-cur">图片组件</span>
        <div class="right">
           
            <div class="clear">
            </div>
        </div>
        <div class="clear">
        </div>
    </h1>
    <div class="table_top">
    </div>
    <div class="dataList">
        <table width="100%">
            <thead>
                <tr>

                    <th width="80" align="left">
                        编号
                    </th>
                    <th width="140" align="left">
                        标题
                    </th>
                    <th width="140" align="left">
                        放置区域
                    </th>

                    <th align="center">
                        展示类型
                    </th>

                    <th align="center">
                        排序
                    </th>
                    <th align="center">
                        是否显示
                    </th>
                    <th width="112" align="left">
                        管理操作
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (WidgetConfigModel info in Model.Config)
                {
                    <tr>

                        <td>
                            @info.CId
                    </td>
                    <td>
                        @info.ShowName
                </td>
                <td>
                    @if (info.DisplayPosition == 1)
                    {
                        <span class="DisplayPosition" data-value="@info.DisplayPosition">顶部区域</span>
                    }
                    else if (info.DisplayPosition == 2)
                    {
                        <span class="DisplayPosition" data-value="@info.DisplayPosition">导航区域下</span>
                    }
                    else if (info.DisplayPosition == 3)
                    {
                        <span class="DisplayPosition" data-value="@info.DisplayPosition">内容区域下</span>
                    }
                    else if (info.DisplayPosition == 4)
                    {
                        <span class="DisplayPosition" data-value="@info.DisplayPosition">商品区域下</span>
                    }
                    else if (info.DisplayPosition == 11)
                    {
                        <span class="DisplayPosition" data-value="@info.DisplayPosition">左侧中间悬浮</span>
                    }
                    else if (info.DisplayPosition == 12)
                    {
                        <span class="DisplayPosition" data-value="@info.DisplayPosition">左侧底部悬浮</span>
                    }
                    else if (info.DisplayPosition == 13)
                    {
                        <span class="DisplayPosition" data-value="@info.DisplayPosition">右侧中间悬浮</span>
                    }
                    else if (info.DisplayPosition == 14)
                    {
                        <span class="DisplayPosition" data-value="@info.DisplayPosition">右侧底部悬浮</span>
                    }

                </td>
                        <td align="center">
                           
                            <img  src="@WorkContext.ImageCDN/images/weapp/widget/index_pic_@(info.DisplayType+".jpg")" alt="" width="64px"/>
                        </td>                
                        <td align="center">
                            <input type="text" url="@Url.Action("ChangeWidgetConfigSort", new {cid = info.CId})" value="@info.DisplayOrder" class="sortinput unselectedsortinput" />
                        </td>
                        <td align="center">
                            @(info.IsShow?"是":"否")
                        </td>
                        <td>
                            @Html.ActionLink("图片", "EditIndexPictureCustomerFeatures", new { cid = info.CId }, new { @class = "editOperate" })
                            <span class="btn-line">|</span>
                            <a href="#" url="@Url.Action("DeleteWidgetConfig", new {cid = info.CId})" class="editOperate ajaxdeleteOperate" }>删除</a>
                        </td>
            </tr>
                }
            </tbody>
        </table>
    </div>
    <div class="table_bottom bg">
    </div>
    @using (Html.BeginForm("AddIndexPictureWidgetConfig", "Store"))
    {
        @Html.HiddenFor(x => x.Code)
        <input id="linktype" name="linktype" value="index_pic_area" type="hidden" />
        <input type="hidden" name="WId" id="WId" value="@Model.Widget.WId" />
        <div class="addTable">
            <table width="100%">
                <tbody>
                    <tr>
                        <td width="66px" align="right">标题：</td>
                        <td style="padding-left: 10px;"><input type="text" size="50" id="ShowName" name="ShowName" /></td>
                    </tr>
                <tr>
                    <td align="right">放置区域：</td>
                    <td style="padding-left: 10px">
                        <select id="DisplayPosition" name="DisplayPosition">
                            <option value="1" selected>顶部区域</option>
                            <option value="2">导航区域下</option>
                            <option value="3">内容区域下</option>
                            <option value="4">商品区域下</option>
                            <option value="11">左侧中间悬浮</option>
                            <option value="12">左侧底部悬浮</option>
                            <option value="13">右侧中间悬浮</option>
                            <option value="14">右侧底部悬浮</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">展示类型：</td>
                    <td style="padding-left: 10px;">
                        <select id="DisplayType" name="DisplayType">
                            <option value="11" selected>单图</option>
                            <option value="12">双图</option>
                            <option value="13">三图</option>
                            <option value="14">四图</option>
                            <option value="15">五图</option>
                            <option value="16">自动轮播</option>
                            <option value="17">手动轮播</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">示意图：</td>
                    <td style="padding-left: 10px">
                        <img id="picDisplayType" src="@WorkContext.ImageCDN/images/weapp/widget/index_pic_11.jpg" alt="" width="160px" />
                    </td>
                </tr>

                    <tr>
                        <td align="right">排序：</td>
                        <td style="padding-left: 10px;"><input type="text" name="DisplayOrder" id="DisplayOrder" value="0" class="input" size="10" /></td>
                    </tr>
                    <tr>
                        <td align="right">是否显示：</td>
                        <td style="padding-left: 10px;">@Html.CheckBox("IsShow", true)</td>
                    </tr>
                    <tr>
                        <td align="right"></td>
                        <td>
                            <input type="image" id="addImg" style="margin: 0px; padding: 0px;" src="/admin_store/images/a.jpg" />
                            <script type="text/javascript">
                                
                                $("#addImg").click(function() {
                                    if ($("#ShowName").val() === "") {
                                        alert("名称不能为空");
                                        return false;
                                    }
                                    $(this).parents("form").submit();
                                    return false;
                                })
                            </script>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    }
}